@extends('admin.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="/css/ga-embed.css">
@stop
@section('page_header')
    <h1 class="page-title">
        <i class="voyager-lock"></i>@if (empty($id)) 添加角色 @else 编辑角色 @endif 
    </h1>
@stop
@section('content')
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered">

                    <div class="panel-heading">
                    <h3 class="panel-title">@if (empty($id)) 添加角色 @else 编辑角色 @endif<small style="color:red">（*为必填项）</small></h3> </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form role="form"
                          action="{{ route('role.post_add') }}"
                          method="POST" enctype="multipart/form-data">
                        <!-- PUT Method if we are editing -->
                        @if(isset($dataTypeContent->id))
                            {{ method_field("PUT") }}
                        @endif
                        <!-- CSRF TOKEN -->
                        {{ csrf_field() }}
                        <div class="panel-body">
                            @if (count($errors) > 0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="form-group">
                            <label for="name"><small style="color:red">*</small>角色名</label>
                                    <input type="hidden" value="{{ $id }}" name="role_id">
                                    <input type="text" class="form-control" name="name"
                                               placeholder="角色名" id="name"
                                               value="@if (!empty($id)) {{ $role->name }} @endif">
                            </div>
                            <div class="form-group">
                                    <label for="name"><small style="color:red">*</small>描述</label>
                                    <input type="text" class="form-control" name="display_name"
                                               placeholder="描述" id="display_name"
                                               value="@if (!empty($id)) {{ $role->display_name }} @endif">
                            </div>
                            <label for="permission"><small style="color:red">*</small>权限</label><br>
                            <a href="#" class="permission-select-all">选择全部</a> / <a href="#"  class="permission-deselect-all">取消全选</a>
                            <ul class="permissions checkbox">
                            @foreach ($permissions as $table=>$permission)
                                <li>
                                    <input type="checkbox" id="{{$table}}" class="permission-group">
                                    <label for="{{$table}}"><strong>{{ucwords($table)}}</strong></label>
                                    <ul>
                                    @foreach($permission as $perm)
                                        <li>
                                            <input type="checkbox" id="permission-{{$perm->id}}" @if (!empty($id)) @if(in_array($perm->id, $selectedPermission)) checked @endif @endif name="permissions[]" class="the-permission" value="{{$perm->id}}" >
                                            <label for="permission-{{$perm->id}}">{{title_case(str_replace('_', ' ', $perm->key))}}</label>
                                        </li>
                                    @endforeach
                                    </ul>
                                </li>
                            @endforeach
                            </ul>
                        </div><!-- panel-body -->
                        <div class="panel-footer">
                            <button type="submit" class="btn btn-primary" onclick="return check()">@if (empty($id)) 添加 @else 编辑 @endif</button>
                        </div>
                    </form>
                    <iframe id="form_target" name="form_target" style="display:none"></iframe>
                    <form id="my_form" action="" target="form_target" method="post"
                          enctype="multipart/form-data" style="width:0;height:0;overflow:hidden">
                        {{ csrf_field() }}
                        <input name="image" id="upload_file" type="file"
                               onchange="$('#my_form').submit();this.value='';">
                        <input type="hidden" name="type_slug" id="type_slug" value="">
                    </form>
                </div>
            </div>
        </div>
    </div>
    @stop
    @section('javascript')
    <script>
        $('document').ready(function () {
            $('.toggleswitch').bootstrapToggle();
            $('.permission-group').on('change', function(){
                $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
            });
            $('.permission-select-all').on('click', function(){
                $('ul.permissions').find("input[type='checkbox']").prop('checked', true);
                return false;
            });
            $('.permission-deselect-all').on('click', function(){
                $('ul.permissions').find("input[type='checkbox']").prop('checked', false);
                return false;
            });
            function parentChecked(){
                $('.permission-group').each(function(){
                    var allChecked = true;
                    $(this).siblings('ul').find("input[type='checkbox']").each(function(){
                        if(!this.checked) allChecked = false;
                    });
                    $(this).prop('checked', allChecked);
                });
            }
            parentChecked();
            $('.the-permission').on('change', function(){
                parentChecked();
            });
        });
    </script>
    <script>
        function check() {
            var name = $("#name").val();
            var display_name = $("#display_name").val();

            if (name.trim() == '') {
                toastr.error("角色名不能为空");
                return false;
            }
            if (display_name.trim() == '') {
                toastr.error("角色描述不能为空");
                return false;
            }
        }
    </script>
    <script src="/js/tinymce/tinymce.min.js"></script>
    <script src="/js/voyager_tinymce.js"></script>
@stop

